<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .range{display: flex;width: 400px;height: 100px;border: solid 1px black;align-items: center;text-align: center;margin: 0 auto;}
    .range span{width: 50px;}
    .range em{width: 50px;font-style: normal;}
    .range .box{width: 250px;height: 20px;background: #ccc;position: relative;}
    .range .box p{width: 0px;background: blue;margin: 0;height: 20px;}
    .range .box i{position: absolute;width: 20px;height: 40px;left: 0px;top: -10px;background: rgba(0,0,255,0.6);border-radius:10px;cursor: move;}

  </style>
</head>
<body>
  <input type="range">

  <div class="range">
    <span>0</span>
    <em>0.00%</em>
    <div class="box">
      <p><i></i></p>
    </div>
    <span>100</span>
  </div>
</body>
<script>
  
  const box = document.querySelector(".range .box");
  const i = document.querySelector(".range .box i");
  const p = document.querySelector(".range .box p");
  const em = document.querySelector(".range em");
  
  const maxW = box.offsetWidth-i.offsetWidth;

  i.onmousedown = function(eve){
    const downE = eve || window.event;
    downE.preventDefault();
    document.onmousemove = function(eve){
      const moveE = eve || window.event;
      // 注意计算鼠标真正移动的距离：
      // 相对于页面的坐标 - 按下时相对于元素的坐标 - 可能会影响布局的偏移位置
      let l = moveE.pageX - downE.offsetX - box.offsetLeft;

      if(l<0) l=0;
      if(l>maxW) l=maxW;

      i.style.left = l + "px";
      p.style.width = l + "px";

      em.innerText = (l / maxW * 100).toFixed(2) + "%";
    }
    document.onmouseup = function(){
      document.onmousemove = document.onmouseup = null;
    }
  }



</script>
</html>